<template>
  <el-form ref="form" label-width="0" label-position="left" size="mini">
    <div class="print-config-title">{{ $t('图片设置') }}</div>
    <el-form-item class="mt-16 ml-8">
      <l-img-select v-model="myConfig.backgroundImg" />
    </el-form-item>
    <el-form-item v-if="pageIndex == 0 && pageConfig.isHeaderShow == '1'" class="ml-8" :label="$t('页眉')" label-width="40px">
      <el-switch v-model="myConfig.isHeader" />
    </el-form-item>
    <div class="print-config-title">{{ $t('大小位置') }}</div>
    <el-row class="mt-16">
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="W" label-width="32px">
          <el-input-number
            v-model="myConfig.width"
            controls-position="right"
            :min="1"
          />
        </el-form-item>
      </el-col>
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="X" label-width="32px">
          <el-input-number
            v-model="myConfig.left"
            controls-position="right"
            :min="pageIndex == 0 && pageConfig.isHeaderShow == '1'&& myConfig.isHeader?-pageConfig.paddingLeft:0"
          />
        </el-form-item>
      </el-col>
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="H" label-width="32px">
          <el-input-number
            v-model="myConfig.height"
            controls-position="right"
            :min="1"
          />
        </el-form-item>
      </el-col>
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="Y" label-width="32px">
          <el-input-number
            v-model="myConfig.top"
            controls-position="right"
            :min="pageIndex == 0 && pageConfig.isHeaderShow == '1'&& myConfig.isHeader?-pageConfig.paddingTop:0"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <div class="print-config-title mt-16">{{ $t('颜色设置') }}</div>
    <div class="mt-16 ml-8">{{ $t('透明度') }}</div>
    <el-form-item class="ml-8">
      <el-col :span="18">
        <el-slider v-model="myConfig.opacity" />
      </el-col>
      <el-col :span="5" :offset="1">
        <el-input-number
          v-model="myConfig.opacity"
          controls-position="right"
          :min="0"
          :max="100"
        />
      </el-col>
    </el-form-item>
    <el-form-item class="mt-16 ml-8">
      <div style="display: flex">
        <l-checkbox
          :options="[{ label: '背景颜色', value: '1' }]"
          v-model="myConfig.isBackgroundColor"
        />
        <l-input-color
          :notInput="true"
          v-model="myConfig.backgroundColor"
          style="margin-left: 8px"
        />
      </div>
    </el-form-item>
    <div class="print-config-title" style="margin-bottom: 16px">{{ $t('边框设置') }}</div>
    <el-form-item>
      <l-select
        :clearable="false"
        :options="borderOption"
        v-model="myConfig.borderLine"
      />
    </el-form-item>
    <el-form-item>
      <el-col class="form-item-label-pd8" :span="10">
        <el-form-item :label="$t('大小')" label-width="50px">
          <el-input-number
            v-model="myConfig.borderSize"
            controls-position="right"
            :min="0"
            style="width: 60px;"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" :offset="2">
        <el-form-item>
          <img src="../../../../assets/round.svg" style="margin-right: 8px" />
          <el-input-number
            v-model="myConfig.bordeRadius"
            controls-position="right"
            :min="0"
            style="width: 60px;"
          />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item>
          <l-input-color
            :notInput="true"
            style="margin-left: 8px"
            v-model="myConfig.borderColor"
          />
        </el-form-item>
      </el-col>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
    pageConfig: {
      type: Object,
      default: () => ({}),
    },
    pageIndex:Number
  },
  data() {
    return {
      borderOption: [
        {
          value: "solid",
          label: this.$t("实线"),
        },
        {
          value: "dashed",
          label: this.$t("虚线"),
        },
        {
          value: "dotted",
          label: this.$t("点虚线"),
        },
        {
          value: "double",
          label: this.$t("双实线"),
        },
      ],
    };
  },
  computed: {
    myConfig() {
      return this.config;
    },
  },
  created() {},
  methods: {},
};
</script>
